<template>
   <div class="list" ref="wrapper">
        <div>
            <div class="area">
                    <div class="title border-topbottom">当前城市</div>
                    <div class="button-list">
                        <div class="button-wrapper">
                            <div class="button">{{this.city}}</div>
                        </div>
                    </div>
            </div>
            <div class="area">
                    <div class="title border-topbottom">热门城市</div>
                    <div class="button-list">
                        <div class="button-wrapper" v-for="item in hot" :key="item.id" @click="handleCityClick(item.name)">
                            <div class="button">{{item.name}}</div>
                        </div>                   
                    </div>
            </div>
            <div class="area" v-for="(cityarea,key) in citiesList" :key="key" :ref="key">              
                    <div class="title border-topbottom">{{key}}</div>
                    <div class="item-list">
                        <div class="item border-bottom" v-for="cityitem in cityarea" :key="cityitem.id" @click="handleCityClick(cityitem.name)">{{cityitem.name}}</div>
                    </div>           
            </div>
        </div>    
   </div>
</template>
<script>
import BScroll from '@better-scroll/core'
import {mapState,mapMutations} from 'vuex'
export default {
    name:'CityList',
    props:{
        hot:Array,
        citiesList:Object,
        letter:String
    },
    watch:{
        letter () {
            if(this.letter){
                let element = this.$refs[this.letter][0]
                this.scroll.scrollToElement(element)
            }
        }
    },
    methods:{
        handleCityClick (city) {
            this.changeCity(city)
            this.$router.push('/')
        },
        ...mapMutations([
            'changeCity'
        ])
    },
    computed:{
	  ...mapState(['city'])
  },
  updated () {
      this.scroll = new BScroll(this.$refs.wrapper,{click:true})
  },
  activated () {
      this.scroll.refresh()
  }
}

</script>
<style lang="stylus" scoped>
.border-topbottom
    &:before
        border: thin solid #ccc 
    &:after
        border: thin solid #ccc 
.list
    overflow:hidden
    position:absolute 
    top:1.5rem 
    left:0 
    right:0 
    bottom:0 
    .title
        height:.45rem 
        line-height:.45rem 
        background-color:#f0f0f0
        padding-left:.25rem
        font-size:.3rem
    .button-list
        overflow:hidden
        padding:.1rem .6rem .1rem .1rem
        .button-wrapper
            float:left
            width: 33.33% 
            .button 
                margin:.1rem 
                padding: .1rem 0
                text-align:center 
                border: .02rem solid #ccc
                border-radius:.06rem
    .item-list
        .item
            line-height: .7rem
            padding-left:.2rem
</style>
